<template>
  <div>
    <!-- 固定导航栏 -->
    <nav class="fixed-nav">
      <!-- 右侧用户操作区域 -->
      <div class="user-actions">
        <!-- 未登录状态 -->
        <div v-if="!nickName">
          <router-link class="rou-link" to="/loginRegister?type=login">登录</router-link>
          <router-link class="rou-link" to="/loginRegister?type=register">注册</router-link>
        </div>
        <!-- 已登录状态 -->
        <div v-else>
          <!-- 用户名下拉菜单 -->
          <div class="user-dropdown" @click="toggleDropdown">
            <span class="user-name">{{ nickName }}</span>
            <ul v-show="isDropdownVisible" class="dropdown-menu">
              <li><router-link to="/personal-center">个人中心</router-link></li>
              <li><router-link to="/my-favorites">我的喜欢</router-link></li>
              <li @click="handleLogout">退出登录</li>
            </ul>
          </div>
          <router-link class="rou-link" to="/my-orders">我的订单</router-link>
          <!-- 合并类名 -->
          <router-link class="rou-link cart-icon" to="/shopping-cart">
            购物车 ({{ cartCount }})
          </router-link>
        </div>
      </div>
    </nav>
    <nav class="mi-nav">
      <div class="nav-logo">
        <img src="@/assets/mi-logo.png" alt="小米LOGO" class="logo-img">
      </div>
      <ul class="nav-list">
        <li v-for="(item, index) in navItems" :key="index">
          <!-- 关键：添加专用类名 -->
          <router-link
              :to="`/index/goodsCategory/${item.id}`"
              class="nav-item">
            {{ item.categoryName }}
          </router-link>
        </li>
      </ul>
      <div class="nav-search">
        <input
            v-model="searchKeyword"
            type="text"
            placeholder="搜索"
            class="search-input"
            @keyup.enter="handleSearch"
        >
        <button class="search-btn" @click="handleSearch">
          <i class="fas fa-search">搜索</i>
        </button>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import {sendRequest} from "@/util/request";

export default {
  name: "IndexInfo",
  data() {
    return {
      // 从本地存储获取 nickName
      nickName: localStorage.getItem('nickName') || '',
      productCategories: [],
      isDropdownVisible: false,
      cartCount: 0, // 这里可以根据实际接口返回的购物车数量填充
      navItems: [],
      goodsCategory:{
        isActive:1
      },
      searchKeyword: '', // 新增搜索关键词
    };
  },
  created() {
    // 获取商品类别接口
    this.fetchProductCategories();
    // 模拟获取购物车数量（实际替换为接口）
    this.cartCount = 9;
  },
  methods: {
    async fetchProductCategories() {
      console.log(this.goodsCategory.isActive)
      sendRequest("post",`index/category/selectGoodsCategory/${this.goodsCategory.isActive}`)
          .then((res)=>{
            this.navItems=res.categoryList
          })
    },
    handleLogout() {
      // 移除本地存储的 nickName
      localStorage.removeItem('nickName');
      this.nickName = '';
      this.$router.push('/loginRegister?type=login');
    },
    toggleDropdown() {
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    // 新增搜索方法
    handleSearch() {
      if (this.searchKeyword.trim()) {
        this.$router.push({
          path: '/product-list',
          query: {
            keyword: this.searchKeyword,
            type: 'search'
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 30px; /* 增大左右内边距，让导航栏整体左右有间距 */
  z-index: 1000;
  font-size: 14px;
}

.product-categories li {
  margin: 0 15px;
  cursor: pointer;
}

.user-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 100%;
  flex-wrap: nowrap;
  gap: 20px; /* 让右侧元素之间有一定距离 */
}

.user-dropdown {
  position: relative;
  margin-right: 0; /* 移除原有的右边距 */
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-name {
  color: #b0b0b0;
  transition: color 0.3s;
  margin: 0;
  white-space: nowrap;
}

.user-name:hover {
  color: white;
}

   /* 统一下拉菜单样式 */
 .dropdown-menu {
   position: absolute;
   top: 100%;
   right: 0;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.15);
   min-width: 140px;
   padding: 8px 0;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: all 0.3s ease;
 }

.user-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #666;
  transition: all 0.2s;
  font-size: 14px;
}

.dropdown-menu li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #f0f0f0;
}

.dropdown-menu li a {
  color: inherit;
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.dropdown-menu li:hover {
  color: #ff6700;
  background: #f5f5f5;
}

/* 优化下拉菜单图标 */
.dropdown-menu li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 12px;
  background-size: contain;
}

.cart-icon {
  color: #ff6700;
  font-weight: bold;
}

.rou-link {
  color: #b0b0b0;
  margin-right: 0; /* 移除原有的右边距 */
  text-decoration: none;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.rou-link:hover {
  color: white;
}

.user-actions > div {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 100px;
}

.user-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
}

.user-dropdown::after,
.rou-link:not(.cart-icon)::after {
  content: "|";
  color: #424242;
  margin-left: 15px;
}

.rou-link[to="/my-orders"] {
  order: 1;
  margin-right: 0;
}

.cart-icon {
  margin-right: 0;
  padding-left: 15px;
}
.mi-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 80px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
}

.nav-logo {
  flex-shrink: 0;
  margin-left: 115px;
}

.logo-img {
  height: 40px;
}

.nav-list {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list li {
  font-size: 16px;
}

/* 关键：新增专用样式 */
.nav-item {
  color: #333333 !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.nav-item:hover {
  color: #ff6a00 !important;
}

.nav-search {
  display: flex;
  align-items: center;
  margin-right: 115px;
}

.search-input {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  outline: none;
  width: 300px;
  font-size: 14px;
}

.search-btn {
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border 0.3s;
}

.search-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

@media (max-width: 1024px) {
  .nav-list {
    gap: 16px;
  }

  .search-input {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .mi-nav {
    padding: 0 20px;
  }

  .nav-list {
    display: none;
  }
}
</style>
